<!DOCTYPE html>
<html class="x-admin-sm">

<head>
  <meta charset="UTF-8">
  <title></title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
    content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
  <link rel="stylesheet" href="./css/font.css">
  <link rel="stylesheet" href="./css/xadmin.css">
  <link rel="stylesheet"
    href="https://at.alicdn.com/t/c/font_3991515_hu4m1e1taq.css?spm=a313x.7781069.1998910419.53&file=font_3991515_hu4m1e1taq.css">
  <style>
    ul {
      list-style: none;
    }

    .title {
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin-top: 20px;
    }



    .title .box {

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      font-size: 20px;
      width: 300px;
      height: 100px;
    }

    .title .box span {
      margin-left: -12px;
    }

    /* 内容区域 */

    .nav {
      position: relative;
      display: flex;
      justify-content: space-around;
      /* width: 1200px; */
      margin-top: 20px;
      font-size: 16px;


    }
   
    

    .nav .new,
    .good,
    .gender {

      width: 410px;
      height: 300px;
      background-color: #fff;

    }

    .new,
    .good {

      overflow: hidden;
    }




    .new .two li {
      display: flex;
      justify-content: space-between;
      margin: 15px;
    }
    .new .two li i{
      margin-right: 170px;
    }
   

    .good .two p {


      margin:8px 0 20px 10px;
      line-height: 1;
      overflow: hidden;

      /* 隐藏超出部分 */
      white-space: nowrap;
      /* 不换行 */
      text-overflow: ellipsis;

    }

    .gender .two {
      height: 100%;
    }


    .one {

      padding-left: 20px;

      height: 40px;


      line-height: 40px;
      background-color: #dddddd;
    }

    .chart {
      width: 1280px;
      height: 400px;
      margin-top: 20px;
      margin-left: 10px;

      background-color: #fff;
    }
  </style>
  <script src="./lib/layui/layui.js" charset="utf-8"></script>
  <script type="text/javascript" src="./js/xadmin.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
  <script src="./js/ajaxBase.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.2/dist/echarts.min.js"></script>
  <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
</head>

<body>
  <div class="x-nav">
    <span class="layui-breadcrumb">
      <a href="">首页</a>
      <a href="">演示</a>
      <a>
        <cite>导航元素</cite></a>
    </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
      onclick="location.reload()" title="刷新">
      <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
  </div>
  <!-- <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
               这是首页，主要是一些echart数据
            </div>
        </div>  -->

  <!-- 头部区域 -->
  <div class="title">
    <div class="box layui-bg-red">


      <p>管理员用户</p>
      <span class="manage"></span>

    </div>
    <div class="box layui-bg-green">

      <p>平台注册用户</p>
      <span class="sign"></span>

    </div>
    <div class="box layui-bg-orange">

      <p>平台文章总数</p>
      <span class="txt"></span>

    </div>
    <div class="box layui-bg-blue">

      <p class="advpos_num"></p>
      <span class="advertisement"></span>

    </div>
  </div>

  <!-- 内容区域 -->

  <div class="nav">
    <div class="new">
      <div class="one">最新注册新用户</div>
      <div class="two">
        <ul>
          <li>
            <span></span>
            <i></i>
          </li>
        </ul>

      </div>
    </div>

    <div class="good">
      <div class="one">点赞文章排行</div>
      <div class="two">
        <p></p>
      </div>


    </div>
    <div class="gender">
      <div class="one">用户性别分析</div>
      <div class="two"></div>


    </div>
  </div>

  <!-- 柱状图区域 -->

  <div class="chart">

  </div>

</body>
<script>
  //从本地拿到请求头
  // const token = localStorage.getItem('x-token')
  render()
  async function render() {
    const { data: { data } } = await axios.get('/index/baseInfo')
    // console.log(res)

    //拿到数据 渲染到对应得位置
    // console.log(data)

    document.querySelector('.manage').innerHTML = `${data.admin_num}名`
    document.querySelector('.sign').innerHTML = `${data.user.total}名`
    document.querySelector('.txt').innerHTML = `${data.article_num}篇`
    document.querySelector('.advpos_num').innerHTML = `广告图 ${data.advpos_num}张`
    document.querySelector('.advertisement').innerHTML = `广告位 ${data.advimg_num}个`

    //图标区域

    //1.注册新用户
    document.querySelector('.new .two ul').innerHTML = data.new_user.map(function (item) {
      return `
      <li>
          <span>${item.username}</span>
          <i>${item.sex === 0 ? '男' : '女'}</i>
          </li>
      `
    }).join('')


    //2.点赞文章排行

    document.querySelector('.good .two p').innerHTML = data.hot_article.map(function (item) {

      return `<p>${item.title}</p>`
    }).join('')


    //饼图封装成函数
    pieChart(data.user.user_woman, data.user.user_man, name)


    //饼状图

    barChart(data.all_cate)

  }

  //饼图渲染成函数
  function pieChart(woman, man) {
    //饼图
    const myChart = echarts.init(document.querySelector('.gender .two'))

    const option = {
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: 'Access From',
          type: 'pie',
          radius: ['40%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 40,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [

            { value: woman, name: '女性' },
            { value: man, name: '男性' }
          ]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }

  // 柱状图封装成函数
  function barChart(arr) {


    const myChart = echarts.init(document.querySelector('.chart'))
    const option = {
      title: {
        text: '各类文章发布数量',
        left: 'center',
        top : 10,
        textStyle: {
          fontSize: 20,
          color : '#6780cc'
        }
      },
      xAxis: {
        type: 'category',
        data: arr.map(function (item) { return item.catename })
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          data: arr.map(function (item) { return item.num }),
          type: 'bar',
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }
      ]
    }
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
  }




</script>

</html>